<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣环布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .HolyGrail {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header, footer {
            display: flex;
            height:100px ;
            background-color: #666666;
        }
        .content {
            display: flex;
            flex: 1;
            background-color: bisque;
        }
        .content .leftside{
            flex: 0 0 12em;
            background-color: #77BBDD;
        }
        .content .center{
            flex: 1;
            background-color: #D6D6D6;
        }
        .content .rightside{
            flex: 0 0 12em;
            background-color: #FF6633;
        }
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
                flex: 1;
            }
            .content .leftside,
            .content .center,
            .content .rightside {
                flex: auto;
            }
        }
    </style>
</head>
<body>
<div class="HolyGrail">
    <header></header>
    <div class="content">
        <div class="leftside"></div>
        <div class="center"></div>
        <div class="rightside"></div>
    </div>
    <footer></footer>
</div>
</body>
</html>